import 'package:flutter/material.dart';
import 'package:ichinesereader/models/book/BookItem.dart';
import 'package:ichinesereader/utils/helper.dart';
import 'package:get/get.dart';
import '../../themes/appTheme.dart';
import 'package:just_the_tooltip/just_the_tooltip.dart';

class BookGridSimplified extends StatefulWidget {
  BookGridSimplified({
    Key? key,
    required this.books,
  }) : super(key: key);

  final List<BookItem> books;

  @override
  _BookGridWithCheckBox createState() => _BookGridWithCheckBox();
}

class _BookGridWithCheckBox extends State<BookGridSimplified>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        padding: EdgeInsets.zero,
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 240,
            childAspectRatio: 150 / 200,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20),
        itemCount: widget.books.length,
        itemBuilder: (BuildContext ctx, index) {
          BookItem currentBook = widget.books[index];
          String btitle = currentBook.bookTitle ?? '';
          String bimage = currentBook.bookImageLink ?? '';
          String color = currentBook.color ?? '';
          String bookLevel = currentBook.bookLevel ?? '';
          String desc = currentBook.description ?? '';

          return Container(
            ////////////SINGLE BOOK BACKGROUND//////////////////
            decoration: BoxDecoration(
              color: Get.isDarkMode
                  ? AppTheme.colors.darkTheme2
                  : Colors.white.withOpacity(0.3),
              borderRadius: BorderRadius.circular(4.5),
              boxShadow: Get.isDarkMode
                  ? null
                  : [
                      BoxShadow(
                        blurRadius: 12,
                        spreadRadius: 1,
                        color: Get.isDarkMode
                            ? Color(0xff555555)
                            : Colors.black.withOpacity(0.1),
                        offset: Offset(1, 1),
                      ),
                    ],
            ),
            padding: EdgeInsets.fromLTRB(12.0, 12.0, 8.0, 0.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Expanded(
                        child: GestureDetector(
                          onTap: () {},
                          child: JustTheTooltip(
                            backgroundColor: Get.isDarkMode
                                ? Get.theme.primaryColor
                                : Get.theme.primaryColorDark,
                            preferredDirection: AxisDirection.right,
                            elevation: 4.0,
                            content: Container(
                              padding: EdgeInsets.all(12.0),
                              width: 180,
                              color: Colors.transparent,
                              child: Text(
                                desc != '' ? desc : btitle,
                                style: TextStyle(
                                  fontSize: 16,
                                  color: Get.isDarkMode
                                      ? Get.theme.primaryColorDark
                                      : Get.theme.primaryColorLight,
                                ),
                              ),
                            ),
                            child: Image.network(
                              bimage,
                              height: 200.0,
                              width: 156,
                              fit: BoxFit.cover,
                              errorBuilder: (context, error, stackTrace) {
                                return Image.asset(
                                    'assets/images/imagenotavailable.png',
                                    height: 200.0,
                                    width: 156,
                                    fit: BoxFit.cover);
                              },
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {},
                        //////gap of book and title from here//////
                        child: Container(
                          margin: EdgeInsets.only(top: 12.0),
                          height: 45,
                          //////////çº§åˆ«å’Œä¹¦å/////////////////////
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Visibility(
                                  visible: bookLevel != '',
                                  child: Padding(
                                    padding: const EdgeInsets.only(top: 3.0),
                                    child: Text(
                                      bookLevel != '0'
                                          ? ' L$bookLevel  '
                                          : 'N/A',
                                      style: TextStyle(
                                          fontFamily: 'Montserrat',
                                          fontSize: 12,
                                          color: Colors.white,
                                          backgroundColor:
                                              hexStringToHexInt(color)),
                                    ),
                                  )),
                              Expanded(
                                child: Text(' $btitle',
                                    maxLines: 2,
                                    overflow: TextOverflow.fade,
                                    style: TextStyle(
                                        color: Get.isDarkMode
                                            ? Colors.white
                                            : Colors.black,
                                        fontSize: 14.0,
                                        fontFamily: 'Noto Sans SC')),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }
}
